<template>
	<view>
		<view class="itemss" v-for="(item,index) in list" :key="index">
			<image class="img" :src="item.avatar_text" mode="aspectFill"></image>
			<view class="items_r">
				<view class="items_r_1 flex_jc_sb">
					<view class="flex">
						<view class="name">{{item.name}}</view>
						<view class="huiy">第{{item.meeting_num}}期会员</view>
					</view>
					<view class="flex">
						<view class="btn" @click.stop="copyFun(item.wechat,'微信已复制')">
							<uni-icons type="weixin" color="#fff" size="13"></uni-icons>
							微信
						</view>
						<view class="btn btn1" @click="phoneCall(item.mobile)">
							<uni-icons type="phone-filled" color="#fff" size="13"></uni-icons>
							电话
						</view>
					</view>
				</view>
				<view class="items_r_2">
					<image src="/static/l.png" mode=""></image>
					<span class="">
						{{item.company_name}}·{{item.company_job}}
					</span>
				</view>

				<scroll-view :scroll-x="true" class="scllow">
					<view class="tipitem" v-for="tags in item.tags_text">
						{{tags}}
					</view>
				</scroll-view>
				<view class="items_r_3">
					<image src="/static/c2.png" mode=""></image>
					{{item.city}}
				</view>
			</view>
		</view>
		<view class="" style="height: 66rpx;">
		</view>
		<view class="k1" v-if="list.length == 0">
			<image src="/static/kong.png" mode=""></image>
			<view class="texts">
				暂无筛选内容
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		getCircleList
	} from '@/common/http.api.js';
	import {
		reactive,
		ref
	} from 'vue';
	const params = reactive({
		page: 1,
		limit: 10,
		tags: ''
	})
	onLoad((res) => {
		console.log(res);
		uni.setNavigationBarTitle({
			title: res.name
		})
		params.tags = res.id
		getList()
	})
	onReachBottom(() => {
		params.page++
		getList()
	})
	const list = ref([])

	function getList() {
		getCircleList(params).then(res => {
			list.value.push(...res.data)
		})
	}
	
	
	function phoneCall(number){
		if(uni.getStorageSync('cirleToken')){
			if(uni.getStorageSync('user').is_circle==0){
				uni.showModal({
					title:'系统提示',
					content: '此功能需要入圈后访问！',
					confirmText:'申请入圈',
					confirmColor:'#0756FF',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url:'/pages/user/apply'
							})
						} else if (res.cancel) {}
					}
				});
			}else{
				uni.makePhoneCall({
					phoneNumber: number, //仅为示例
					success: function() {
						console.log('success');
					}
				});
			}
		}else{
			uni.navigateTo({
				url: '/pages/login/login'
			})
		}
	}
	function copyFun(text,message){
		if(uni.getStorageSync('cirleToken')){
			if(uni.getStorageSync('user').is_circle == 0){
				uni.showModal({
					title:'系统提示',
					content: '此功能需要入圈后访问！',
					confirmText:'申请入圈',
					confirmColor:'#0756FF',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url:'/pages/user/apply'
							})
						} else if (res.cancel) {}
					}
				});
			}else{
				uni.setClipboardData({
					data:text, // 要复制的内容
					success: () => { // 复制成功回调
						uni.showToast({
							title:message,
							icon: 'success'
						})
					}
				});
			}
		}else{
			uni.navigateTo({
				url: '/pages/login/login'
			})
		}
		
	}
</script>

<style lang="scss">
	page {
		background: #F7F8FC;
	}

	.k1 {
		text-align: center;
		margin: 120rpx auto;
		width: 360rpx;

		image {
			width: 360rpx;
			height: 360rpx;
		}

		.texts {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #979797;
			margin-top: 10rpx;
		}
	}

	.itemss {
		width: 710rpx;
		height: 240rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 20rpx auto;
		padding: 10rpx;
		box-sizing: border-box;
		display: flex;

		.img {
			width: 140rpx;
			height: 220rpx;
			border-radius: 12rpx;
		}

		.items_r {
			margin-left: 14rpx;
			flex: 1;

			.items_r_1 {
				margin-top: 8rpx;

				.name {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #000000;
					margin-right: 16rpx;
				}

				.huiy {
					height: 40rpx;
					background: linear-gradient(223deg, #FFC393 0%, #FFE9D9 100%);
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 1px solid #F9B781;
					padding: 0rpx 10rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 20rpx;
					color: #8A3E00;
					line-height: 40rpx;
				}

				.btn {
					width: 120rpx;
					height: 48rpx;
					background: #08C985;
					border-radius: 40rpx 40rpx 40rpx 40rpx;
					line-height: 48rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
					text-align: center;
				}
				.btn1{
					background: #0756FF !important;
					margin-left: 10rpx;
				}
			}

			.items_r_2 {
				margin: 10rpx auto;
				height: 36rpx;
				background: #F4F4FB;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 22rpx;
				color: #9090A0;
				padding: 0rpx 10rpx;
				display: inline-block;

				image {
					width: 24rpx;
					height: 24rpx;
					margin-right: 6rpx;
					margin-top: 4rpx;
				}
			}

			.items_r_3 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #0756FF;
				margin-top: 20rpx;

				image {
					width: 24rpx;
					height: 24rpx;
					margin-right: 6rpx;
				}
			}

			.scllow {
				width: 520rpx;
				height: 50rpx;
				white-space: nowrap;

				.tipitem {
					display: inline-block;
					height: 40rpx;
					background: #EFF4FF;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					border: 1px solid #66ADFF;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 22rpx;
					color: #529FF8;
					line-height: 40rpx;
					padding: 0rpx 15rpx;
					margin-right: 10rpx;
				}
			}

		}
	}
</style>